<template>
    <div class="app-container">
        <el-form :model="data.info" label-width="120px" class="w-1/2" ref="ruleFormRef">
            <span :class="language=='en'?'text-[#ed0f0f] absolute ml-6 mt-2':'text-[#ed0f0f] absolute ml-12 mt-2'">*</span>
            <el-form-item :label="$t('public.template') + 'ID'" prop="template_id">
                <el-select v-model="data.info.template_id" :placeholder="$t('message.pleaseSelect')"
                    @visible-change="visibleChange(1)" @change="changeTemplate">
                    <el-option v-for="(item, index) in data.templateList" :label="item.id + '-' + item.name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <span class="text-[#ed0f0f] absolute ml-12 mt-2">*</span>
            <el-form-item :label="$t('presets.assignView.viewID')" prop="view_id">
                <el-select v-model="data.info.view_id" :placeholder="$t('message.pleaseSelect')"
                    @visible-change="visibleChange(2)">
                    <el-option v-for="(item, index) in data.viewList" :label="item.id + '-' + item.name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <!-- 设备组 -->
            <span :class="language=='en'?'text-[#ed0f0f] absolute ml-0 mt-2':'text-[#ed0f0f] absolute ml-14 mt-2'" v-if="data.info.m_id.length<1">*</span>
            <el-form-item :label="$t('presets.assignView.group')"  prop="mg_id">
                <el-select v-model="data.info.mg_id" :placeholder="$t('message.pleaseSelect')" multiple clearable
                    filterable @visible-change="visibleChange(4)">
                    <el-option v-for="item in data.macgrouping" :key="item.mg_id"
                        :label="item.mg_id + '-' + item.mg_name" :value="item.mg_id" />
                </el-select>
            </el-form-item>
            <!-- 设备 -->
            <span :class="language=='en'?'text-[#ed0f0f] absolute ml-10 mt-2':'text-[#ed0f0f] absolute ml-16 mt-2'" v-if="data.info.mg_id.length<1">*</span>
            <el-form-item :label="$t('goods.list.machine')" prop="m_id">
                <el-select v-model="data.info.m_id" :placeholder="$t('message.pleaseSelect')" multiple filterable
                    clearable @visible-change="visibleChange(3)">
                    <el-option v-for="(item, index) in data.machineList"
                        :label="item.m_id + '-' + item.machine_name + '-' + item.machine_id" :value="item.m_id" />
                </el-select>
            </el-form-item>

            <el-form-item :label="$t('public.state')" prop="status">
                <el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
                    <el-option :label="$t('public.enable')" :value="1" />
                    <el-option :label="$t('public.disable')" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('date.forceTime')" prop="publish_time">
                <el-date-picker v-model="data.info.publish_time" type="date" :placeholder="$t('message.date')">
                </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('date.failureTime')" prop="expireate_time">
                <el-date-picker v-model="data.info.expireate_time" type="date" :placeholder="$t('message.date')">
                </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('presets.assignView.viewDesc')" prop="notes">
                <el-input type="textarea" v-model="data.info.notes"></el-input>
            </el-form-item>
            <div class="w-full text-center">
                <div class="inline-block">
                    <el-button type="primary" @click="onSave('add')" :disabled="data.isDisabled">{{
                        $t('public.save')}}</el-button>
                    <el-button @click="onCancel">{{ $t('public.cancel') }}</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { reactive } from 'vue'
import { getAddmachine } from '@/api/presets';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { gettemplateList, getTemplateViewList } from '@/api/presets';
import { getgroupList } from "@/api/machine_type";
import { getmachineList } from '@/api/machine';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
    language.value = locale.value
})
const router = useRouter()
let data = reactive({
    info: {
        mv_id: null,
        template_id: null,
        view_id: null,
        m_id: [],
        name: '',
        notes: '',
        publish_time: null,
        expireate_time: null,
        status: null,
        mg_id: ''
    },
    formParam: {}, // 填写表单
    isDisabled: false,
    templateList: [],
    viewList: [],
    machineList: [],
    macgrouping: [],
    templateRowId: ''
})
let changeTemplate = (val) => {
    data.templateRowId = val
}
let visibleChange = (flag) => {
    if (flag == 1) {
        templateList()
    }
    if (flag == 2) {
        viewList()
    }
    if (flag == 3) {
        machineList()
    }
    if (flag == 4) {
        macgroupList()
    }
}
let macgroupList = () => {
    getgroupList().then(res => {
        if (res.state == 200) {
            data.macgrouping = res.data
        }
    })
}
let machineList = () => {
    getmachineList().then(res => {
        if (res.state == 200) {
            data.machineList = res.data
        }
    })
}
let viewList = () => {
    getTemplateViewList().then(res => {
        if (res.state == 200) {
            data.viewList = res.data.filter(item => item.template_id == data.templateRowId)
        }
    })
}
let templateList = () => {
    gettemplateList().then(res => {
        if (res.state == 200) {
            data.templateList = res.data
        }
    })
}

let onCancel = () => {
    router.push('/presets/assignView')
}
let onSave = (type) => {
    console.log(data.info.mg_id);
    if (type == 'add') {
        if(!data.info.mg_id){
            ElMessage({
                   message: $t('message.mgId'),
                    type: 'success'
                })
        }
        data.isDisabled = true
        setTimeout(() => {
            data.isDisabled = false
        }, 2000)
        const publishParse = Date.parse(data.info.publish_time)
        const expireateParse = Date.parse(data.info.expireate_time)
        const publish_time = new Date(publishParse);
        const expireate_time = new Date(expireateParse);
        data.viewList.forEach(item => {
            if (item.id == data.info.view_id) {
                data.info.name = item.name
            }
        })
        data.formParam = {
            template_id: data.info.template_id,
            view_id: data.info.view_id,
            m_id: data.info.m_id.join(','),
            name: data.info.name,
            notes: data.info.notes,
            publish_time: data.info.publish_time,
            expireate_time: data.info.expireate_time,
            status: data.info.status,
            mg_id: data.info.mg_id.join(',')
        }
        data.formParam.publish_time = publish_time.getTime() / 1000
        data.formParam.expireate_time = expireate_time.getTime() / 1000
        getAddmachine(data.formParam).then((res) => {
            if (res.state == 200) {
                ElMessage({
                   message: $t('message.saveSuccess'),
                    type: 'success'
                })
                router.push('/presets/assignView')
                return
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            })
        })
    }
}
</script>
